<template>
	<view>
		<view v-if="$token">
			<view class="text-center padding-xl bg-white">
				<image class="cu-avatar round xl margin-top" :src="$userInfo.avatar" mode="aspectFill">
					<view class="margin-tb">{{$userInfo.nickname}}</view>
			</view>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange"></text> 订单
				</view>
				<navigator class="action" hover-class="none" url="/pages/order/list">
					全部订单
				</navigator>
			</view>
			<view class="cu-list grid col-4">
				<view class="cu-item" v-for="(item,index) in orderStatus" :key="index">
					<navigator hover-class="none" :url="'/pages/order/list?status=' + item.status">
						<view :class="item.icon">
							<view class="cu-tag badge" v-if="$order[index] > 0">
								{{$order[index]>99?'99+':$order[index]}}
							</view>
						</view>
						<text>{{item.name}}</text>
					</navigator>
				</view>
			</view>
			<view class="margin-top">
				<view class="cu-list menu">
					<view class="cu-item arrow ">
						<navigator class="content" hover-class="none" url="/pages/goods/edit">
							<text class="cuIcon-add text-grey"></text>
							<text class="text-grey">创建ID</text>
						</navigator>
					</view>
				</view>
			</view>
			<view class="margin-top">
				<view class="cu-list menu">
					<view class="cu-item arrow">
						<navigator class="content" hover-class="none" url="/pages/user/address/address">
							<text class="cuIcon-location text-grey"></text>
							<text class="text-grey">我的地址</text>
						</navigator>
					</view>
					<view class="cu-item arrow">
						<navigator class="content" hover-class="none" url="/pages/user/coupon">
							<text class="cuIcon-vipcard text-grey"></text>
							<text class="text-grey">卡劵中心</text>
						</navigator>
					</view>
					<view class="cu-item arrow" @click="showPhone=true">
						<view class="content">
							<text class="cuIcon-phone text-grey"></text>
							<text class="text-grey">联系我们</text>
						</view>
					</view>
					<view class="cu-item arrow">
						<button class="content text-left" open-type="contact">
							<text class="text-grey cuIcon-service"></text>
							<text class="text-grey">在线客服</text>
						</button>
					</view>
				</view>
			</view>
			<view class="margin-top padding-lr">
				<view class="cu-btn block bg-green lg" @click="logout()">退出登录</view>
			</view>
			<view class="cu-modal" :class="showPhone?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white solid-bottom">
						<view class="action text-gray">
							联系我们
						</view>
						<view class="action cuIcon-close" @click="showPhone=false"></view>
					</view>
					<view class="cu-list menu">
						<view @click="onCall(item)" class="cu-item" v-for="(item, index) in phones" :key="index">
							<view class="content">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<login v-else></login>
	</view>
</template>

<script>
	import login from '@/pages/login/login.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			login
		},
		data() {
			return {
				orderStatus: [{
						name: '待付款',
						status: 0,
						icon: 'cuIcon-pay',
					},
					{
						name: '待发货',
						status: 1,
						icon: 'cuIcon-send',
					},
					{
						name: '待收货',
						status: 2,
						icon: 'cuIcon-deliver',
					},
					{
						name: '待评价',
						status: 3,
						icon: 'cuIcon-comment',
					},
				],
				showPhone: false,
				phones: [{
						name: '100000000001',
					},
					{
						name: '100000000002',
					},
					{
						name: '100000000003',
					},
				],
			}
		},
		computed: {
			...mapState(['$token', '$userInfo', '$order'])
		},
		methods: {
			...mapMutations(['logout']),
			onCall(val) {
				uni.makePhoneCall({
					phoneNumber: val.name
				});
			}
		}
	}
</script>

<style>

</style>
